<template>
    <div class="markdown-container">
        <el-form class="container" ref="ArticleForm" :rules="rules" :model="article">
            <div class="title">MarkDown编辑器</div>
            <el-form-item prop="title">
                <el-input v-model="article.title" placeholder="请输入文章标题">
                    <template slot="prepend">标题</template>
                </el-input>
                &emsp;&emsp;&emsp;&emsp;
                <div id="fist">
                    <span>选择首图:</span>&emsp;
                    <el-upload
                            class="upload-demo"
                            accept="image/jpeg,image/jpg,image/png"
                            ref="upload"
                            action=""
                            :limit="1"
                            :http-request="uploadpicture"
                            :file-list="fileList"
                            :auto-upload="false">
                        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                    </el-upload>
                </div>
            </el-form-item>

            <el-form-item style="margin: 40px 2.5%;" prop="synopsis">
                <el-input
                        type="textarea"
                        placeholder="请输入文章摘要"
                        v-model="article.synopsis"
                        maxlength="200"
                        show-word-limit>
                </el-input>
            </el-form-item>
            <div style="margin: 20px 0;"></div>
            <el-form-item prop="content">
                <mavon-editor
                        v-model="article.content"
                        ref="md"
                        @imgAdd="imgAdd"
                        @change="change"
                        style="min-height: 300px;margin: 10px 2.5%"/>
            </el-form-item>

            <el-button class="editor-btn" type="primary" @click="submit('ArticleForm')">发布</el-button>
        </el-form>
    </div>
</template>

<script>
    import { mavonEditor } from "mavon-editor";
    import "mavon-editor/dist/css/index.css";

    export default {
        name: "Write",
        data() {
            return {
                article: {
                    id: "",
                    title: "",
                    picture: "",
                    synopsis: "",
                    content: "",
                    publishtime: "",
                    modifytime: "",
                },
                // 表单验证，需要在 el-form-item 元素中增加 prop 属性
                rules: {
                    title: [
                        {required: true, message: '标题不可为空', trigger: 'blur'}
                    ],
                    synopsis: [
                        {required: true, message: '摘要不可为空', trigger: 'blur'}
                    ],
                    content: [
                        {required: true, message: '内容不可为空', trigger: 'blur'}
                    ],
                },
                fileList:[],
            };
        },
        components: {mavonEditor},
        methods: {
            // 将图片上传到服务器，返回地址替换到md中
            imgAdd(pos, $file) {
                var formdata = new FormData();
                formdata.append("file", $file);
                //将下面上传接口替换为你自己的服务器接口
                this.$axios({
                    url: "/article/imageadd",
                    method: "post",
                    data: formdata,
                    headers: { "Content-Type": "multipart/form-data" }
                }).then(res => {
                    if(res.code==200){
                        this.$refs.md.$img2Url(pos, res.data.path);
                    }else {
                        this.$message.warning(res.msg);
                    }

                });
            },

            change(value, render) {
                this.article.content = value;
            },

            submit(formName) {
                // 为表单绑定验证功能
                this.$refs[formName].validate((valid) => {
                        if (valid) {
                            console.log(this.article);
                            let files = this.$refs.upload.uploadFiles.length;
                            if(this.article.id!='' && files==0){
                                this.upArticle();
                            }else {
                                if(files>0){
                                    //上传首图
                                    this.$refs.upload.submit();
                                }else {
                                    this.$message.warning("请上传首图");
                                }
                            }
                        }else {
                            return false;
                        }
                });
            },
            uploadpicture(param){
                const self = this;
                //图片文件
                const file = param.file;
                const formdata = new FormData();
                formdata.append("file", file);
                //上传图片
                this.$axios({
                    url: "/article/imageadd",
                    method: "post",
                    data: formdata,
                    headers: { "Content-Type": "multipart/form-data" }
                }).then(res => {
                    console.log(res);
                    if(res.code===200){
                        this.article.picture = res.data.path;
                        self.upArticle();
                    }else {
                        this.$message.warning(res.msg);
                    }
                });
            },
            upArticle(){
                //上传文章
                this.$axios({
                    url: "/article/add",
                    method: "post",
                    data: this.article,
                }).then(res => {
                    console.log(res);
                    if(res.code===200){
                        this.$message.success("提交成功！");
                        this.$router.push("/admin")
                    }else {
                        this.$message.warning(res.msg);
                    }
                });
            }
        },
        mounted() {
            if(this.$route.params.article!=null){
                this.article = this.$route.params.article;
            }
        }
    }
</script>

<style scoped>
    .editor-btn {
        margin-top: 20px;
    }
    .title {
        margin-top: 30px;
        padding-bottom: 30px;
        text-align: center;
        font-size: 20px;
        letter-spacing: 1px;
        color: #333;
        font-weight: 600;
    }
    .el-input{
        width: 45%;
    }
    #fist{
        width: 45%;
        display: inline-table;
        text-align: left;
    }
    .upload-demo{
        width: 30%;
        display: inline-table;
        text-align: left;
    }
</style>